<!doctype html>
<html>
<head>
<style>
*{ margin:0; padding:0; list-style:none; }
#div1{ width:100px; height:100px; position:absolute; background:#ccc;}
#bto{ float:right;}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<body>
<div id="div1"></div>
<input type="button" id="bto" value="回放" />

<script type="text/javascript">
	
var arrX = [],arrY = [];
div1.onmousedown = function(e){
	var ev=e || event;
	var l = ev.clientX - this.offsetLeft;
	var t = ev.clientY - this.offsetTop;
	arrX.push(0);
	arrY.push(0);
	document.onmousemove = function(e){
		var ev = e || event;
		var needL = ev.clientX - l;
		var needT = ev.clientY - t;
		arrX.push(needL),arrY.push(needT);
		console.log(arrX);
		//console.log('X:'+needL+'\nY:'+needT);
		div1.style.left = needL +'px';
		div1.style.top =  needT + 'px';

	};
	document.onmouseup = function(){
		document.onmousemove =document.onmouseup = null;
	};
	return false;
}

var t  = null;

bto.onclick = function(){
	clearInterval(t);
	t = setInterval(function(){
		if(arrY.length == 0){
			clearInterval(t);
		}
		div1.style.left = arrX.pop()+'px';
		div1.style.top = arrY.pop()+'px';
	},30);
	
}
</script>
</body>
</html>
